<template>
  <!-- 字段分组 -->
  <div
    class="zui-field-group"
    :class="{
      'top-border': borders === 'top' || borders === 'all',
      'bottom-border': borders === 'bottom' || borders === 'all'
    }"
    :style="style"
  >
    <header>
      <slot name="header">
        <h1 v-if="title" class="title" :class="[titleStyle, titlePosition]">{{ title }}</h1>
      </slot>
    </header>
    <main class="fields" :class="{ divider }">
      <slot></slot>
    </main>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  // 标题样式 weak/(default)/strong
  titleStyle: {
    type: String,
    default: 'strong'
  },
  // 标题位置 inner/outer
  titlePosition: {
    type: String,
    default: 'inner'
  },
  // 边框 all/top/bottom/none
  borders: {
    type: String,
    default: 'none'
  },
  // 内部分隔线
  divider: {
    type: Boolean,
    default: true
  }
})

const style = { 'border-top-width': props.titlePosition == 'outer' ? '0.5px' : '' }
</script>

<style lang="scss" scoped>
.zui-field-group {
  overflow: hidden;
  border-color: var(--zui-color-divider);
  border-style: solid;

  &.top-border {
    border-top-width: 0.5px;
  }
  &.bottom-border {
    border-bottom-width: 0.5px;
  }
  header {
    .title {
      padding: 0 20px 8px 20px;
      line-height: var(--zui-size-line-height-regular);
      color: var(--zui-color-text-secondary);

      &.weak {
        line-height: var(--zui-size-line-height-small);
        font-size: var(--zui-size-text-small);
      }
      &.outer {
        background-color: #ffffff;
      }
    }
  }
  :deep(.fields) {
    .zui-field {
      position: relative;
      border-radius: 0;
      box-shadow: none;
    }
  }
  :deep(.fields.divider) {
    > * {
      position: relative;
      &:not(:last-child):after {
        content: ' ';
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 20px;
        height: 0.5px;
        background: var(--zui-color-divider);
      }
    }
  }
}
</style>
